<template>
	<h1 @click="activeCourse = ''">Unity</h1>

	<div class="links" v-if="activeCourse == ''">
		<CourseLink 
			v-for="item in course" 
			:key="item.name" 
			:name="item.name" 
			:link="item.link" 
			:lessons="item.lessons"
			@switchCourse="activeCourse = item.name"
		/>
	</div>

	<AppCourse :class="{ 'hide': activeCourse != 'c#' }" :title="activeCourse" :videos="sharpVideos" />
	<AppCourse :class="{ 'hide': activeCourse != 'unity 1st game' }" :title="activeCourse" :videos="firstGameVideos" />
	<AppCourse :class="{ 'hide': activeCourse != 'clicker' }" :title="activeCourse" :videos="clickerVideos" />
	<AppCourse :class="{ 'hide': activeCourse != 'platformer' }" :title="activeCourse" :videos="platformerVideos" />
	<AppCourse :class="{ 'hide': activeCourse != 'tower defence' }" :title="activeCourse" :videos="towerDefenceVideos" />
</template>

<script setup>
import { ref } from 'vue'
import CourseLink from './components/CourseLink.vue'
import AppCourse from './components/AppCourse.vue'

import sharpVideos from './assets/sharp/videos'
import firstGameVideos from './assets/firstGame/videos'
import clickerVideos from './assets/clicker/videos'
import platformerVideos from './assets/platformer/videos'
import towerDefenceVideos from './assets/towerDefence/videos'

const activeCourse = ref('')
const course = ref([
	{
		name: 'c#',
		lessons: 9,
	},
	{
		name: 'unity 1st game',
		lessons: 8,
	},
	{
		name: 'clicker',
		lessons: 7,
	},
	{
		name: 'platformer',
		lessons: 10,
	},
	{
		name: 'tower defence',
		lessons: 10,
	},
])
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	text-decoration: none;
}

ul {
	margin-left: 40px;
}

h1 {
	text-align: center;
	margin: 20px 0;
	font-size: 40px;
	cursor: pointer;
}

.links {
	width: 80%;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.hide {
	display: none;
}
</style>